<template>
    <!-- 放款管理 -->
    <div>
        <div class="fksh">
            <p>逾期催收管理</p>
            <h3>催收管理</h3>
            <!-- 新增催收 -->
            <el-descriptions title="新增催收" :column="2" border>
                <el-descriptions-item label="催收时间" label-align="left" align="center"><input type="text"
                        style="width: 100%;border: none;">
                </el-descriptions-item>
                <el-descriptions-item label="催收方式" label-align="left" align="center">
                    <el-select v-model="value" class="m-2" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="催收内容" label-align="left" align="center" span="2">
                    <el-input :autosize="{ minRows: 4, maxRows: 6 }" type="textarea" placeholder="请输入内容" />
                </el-descriptions-item>
            </el-descriptions>
            <!-- 按钮 -->
            <span class="dialog-footer">
                <el-button @click=fanhui><el-icon>
                        <ArrowLeftBold />
                    </el-icon>返回</el-button>
                <el-button>保存</el-button>
                <el-button type="primary">提交</el-button>
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()
const value = ref('')

const fanhui = () => {
    router.go(-1)
}

const options = [
    {
        value: '电话催收',
        label: '电话催收',
    },
    {
        value: '上门催收',
        label: '上门催收',
    },
]
</script>

<style scoped>
p {
    background-color: rgb(78, 171, 254);
    color: #fff;
    width: 200px;
    height: 40px;
    border-radius: 50px;
    text-align: center;
    line-height: 40px;
}

.fksh {
    height: 100%;
}

.dialog-footer {
    text-align: right;
    display: inline-block;
    width: 100%;
    padding: 20px 0;
}

input:focus-visible {
    outline: none;
    border: none;
    box-shadow: 0 0 0 2px transparent;
    border-bottom: 1.3px solid gainsboro;
}
</style>